import { dom } from '@knno/dom';
import { bar } from './index.css';
import Person from '@material-design-icons/svg/filled/person.svg';
import { Dialog } from '@knno/ui/dialog';
import { list } from '@knno/ui/list';
import { select } from '@knno/ui/select';
import { Toast } from '@knno/ui/toast';

const DATA = [
	{
		text: '数据1',
		value: 1,
		children: [
			{
				text: '数据1-1',
				value: 11,
			},
			{
				text: '数据1-2',
				value: 12,
				children: [
					{
						text: '数据1-2-1',
						value: 121,
					},
					{
						text: '数据1-2-2',
						value: 122,
					},
				],
			},
		],
	},
	{
		text: '数据2',
		value: 2,
	},
	{
		text: '数据3',
		value: 3,
		expand: true,
		children: [
			{
				text: '数据3-1',
				value: 31,
			},
			{
				text: '数据3-2',
				value: 32,
				children: [
					{
						text: '数据3-2-1',
						value: 321,
					},
					{
						text: '数据3-2-2',
						value: 322,
					},
				],
			},
		],
	},
];

export function renderSelect() {
	return [
		dom.h2().text('选择框'),
		dom.div(bar).append(
			select()
				.clearable(true)
				.options(['选项1', '选项2', '选项3'])
				.ref((s) => {
					s.on('change', () => {
						Toast.show(s.value() + '');
					});
				}),
			select()
				.clearable(true)
				.filterable(true)
				.placeholder('选择框...')
				.column({
					children: 'children',
					expand: 'expand',
				})
				.options(DATA),
			select()
				.clearable(true)
				.suffixIcon(Person)
				.placeholder('自定义选择框，选人...')
				.onPopup(async () => {
					return new Promise((resolve) => {
						const dlg = Dialog.create(
							list()
								.activable(true)
								.column({
									value: 'value',
									text: 'text',
									expand: 'expand',
									children: 'children',
								})
								.rows(DATA)
								.ref((l) => {
									l.on('rowclick', () => {
										const result = {
											value: l.activeValue(),
											text: l.activeText() + '',
										};
										dlg.close();
										resolve(result);
									});
								})
						)
							.autoClose(true)
							.show()
							.on('close', () => {
								resolve(null);
							});
					});
				})
		),
	];
}
